<template>

    <div class="room-infor">
      <router-link :to="'/rooms/'+ roomss.room_id+'/'+roomss.room_name">
        <img :src="roomss.room_src" alt="">
        <div class="room-title">
          <div class="room-name">
            {{roomss.room_name | titles}}
          </div>
          <div class="nickname">
            <i class="fa fa-user"></i> {{roomss.nickname}}
          </div>
          <div class="online">
            <i class="fa fa-users"></i>
            <span>{{roomss.online | number}}</span>
          </div>
        </div>
      </router-link>
    </div>

</template>
<script>
  export default {
    props:['roomss']
  }

</script>
<style scoped>
  .room-infor {
    margin-top: 20px;
    overflow: hidden;
  }
  
  .room-infor img {
    float: left;
    width: 4rem;
  }
  
  .room-infor .room-title {
    float: left;
    margin-left: 20px;
  }

</style>
